<template>
  <div class="app-container">
    <!-- 添加或修改租赁合同对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body v-drag-fullscreen>
        <span v-for="data in listData">
        <el-card class="box-card" style="position: relative;margin: 0px 5px; " v-if="data.recordType=='10'">
          <div slot="header" class="clearfix">
            <span style="font-weight: 700">合同变更前</span>
          </div>
            <el-descriptions :column="2" size="max">
              <el-descriptions-item label="房间名称">{{data.newContent.roomName}}</el-descriptions-item>
              <el-descriptions-item label="合同类型">{{data.newContent.typeName}}</el-descriptions-item>
            </el-descriptions>
          <el-descriptions :column="3" size="max" >
            <el-descriptions-item label="甲方(出租方)">{{data.newContent.partyNameType}}</el-descriptions-item>
            <el-descriptions-item label="甲方联系人">{{data.newContent.partyContacts}}</el-descriptions-item>
            <el-descriptions-item label="甲方手机号码">{{data.newContent.partyPhone}}</el-descriptions-item>
            <el-descriptions-item label="乙方(承租方">{{data.newContent.cusName}}</el-descriptions-item>
            <el-descriptions-item label="租户类型">{{dict.label.custom_type[data.newContent.customType]}}</el-descriptions-item>
            <el-descriptions-item label="联系人">{{data.newContent.partyPhone}}</el-descriptions-item>
            <el-descriptions-item label="手机号码">{{data.newContent.cellPhoneNumber}}</el-descriptions-item>
            <el-descriptions-item label="联系地址">{{data.newContent.contactAddress}}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{data.newContent.idCard}}</el-descriptions-item>
            <el-descriptions-item label="合同开始日期">{{parseTime(data.newContent.beginTime, "{y}-{m}-{d}")}}</el-descriptions-item>
            <el-descriptions-item label="租赁期限">{{data.newContent.allottedTime}}<span>个月</span></el-descriptions-item>
            <el-descriptions-item label="合同结束日期">{{parseTime(data.newContent.finishTime, "{y}-{m}-{d}")}}</el-descriptions-item>
            <el-descriptions-item label="保证金金额">{{data.newContent.chargeMoneys}}</el-descriptions-item>
            <el-descriptions-item label="费用标准">{{data.newContent.roomNormMoney}}</el-descriptions-item>
            <el-descriptions-item label="计费周期">{{dict.label.payment_rules[data.newContent.chargingCycle]}}</el-descriptions-item>
            <el-descriptions-item label="生成规则">{{dict.label.charge_generate_type[data.newContent.markerRule]}}</el-descriptions-item>
          </el-descriptions>

           <el-descriptions :column="2" size="max">
              <el-descriptions-item label="变更人"><span style="font-weight: 700"> {{data.createBy}}</span></el-descriptions-item>
              <el-descriptions-item label="变更时间"><span style="font-weight: 700">{{data.createTime}}</span></el-descriptions-item>
           </el-descriptions>
        </el-card>

        <el-card class="box-card" style="position: relative;margin: 0px 5px; " v-if="data.recordType=='20'">
          <div slot="header" class="clearfix">
            <span style="font-weight: 700">合同变更后</span>
          </div>
          <el-descriptions :column="2" size="max">
            <el-descriptions-item label="房间名称">{{data.newContent.roomName}}</el-descriptions-item>
            <el-descriptions-item label="合同类型">{{data.newContent.typeName}}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="3" size="max" >
            <el-descriptions-item label="甲方(出租方)">{{data.newContent.partyNameType}}</el-descriptions-item>
            <el-descriptions-item label="甲方联系人">{{data.newContent.partyContacts}}</el-descriptions-item>
            <el-descriptions-item label="甲方手机号码">{{data.newContent.partyPhone}}</el-descriptions-item>
            <el-descriptions-item label="乙方(承租方">{{data.newContent.cusName}}</el-descriptions-item>
            <el-descriptions-item label="租户类型">{{dict.label.custom_type[data.newContent.customType]}}</el-descriptions-item>
            <el-descriptions-item label="联系人">{{data.newContent.partyPhone}}</el-descriptions-item>
            <el-descriptions-item label="手机号码">{{data.newContent.cellPhoneNumber}}</el-descriptions-item>
            <el-descriptions-item label="联系地址">{{data.newContent.contactAddress}}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{data.newContent.idCard}}</el-descriptions-item>
            <el-descriptions-item label="合同开始日期">
              <span style="font-weight: 700">{{parseTime(data.newContent.beginTime, "{y}-{m}-{d}")}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="租赁期限">
              <span style="font-weight: 700">{{data.newContent.allottedTime}}<span>个月</span></span>
            </el-descriptions-item>
            <el-descriptions-item label="合同结束日期">
              <span style="font-weight: 700">{{parseTime(data.newContent.finishTime, "{y}-{m}-{d}")}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="保证金金额">{{data.newContent.chargeMoneys}}</el-descriptions-item>
            <el-descriptions-item label="费用标准">
              <span style="font-weight: 700">
                {{data.newContent.roomNormMoney}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="计费周期">
              <span style="font-weight: 700">
                {{dict.label.payment_rules[data.newContent.chargingCycle]}}</span>
            </el-descriptions-item>

            <el-descriptions-item label="生成规则">
              <span style="font-weight: 700">
                {{dict.label.charge_generate_type[data.newContent.markerRule]}}</span>
            </el-descriptions-item>
          </el-descriptions>
            <el-descriptions :column="2" size="max">
              <el-descriptions-item label="变更人"><span style="font-weight: 700"> {{data.createBy}}</span></el-descriptions-item>
              <el-descriptions-item label="变更时间"><span style="font-weight: 700">{{data.createTime}}</span></el-descriptions-item>
           </el-descriptions>
          <el-descriptions :column="1" size="max">
            <el-descriptions-item label="变更原因"><span style="font-weight: 700">{{data.leaseCause}}</span></el-descriptions-item>
          </el-descriptions>
        </el-card>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { contractMixin } from "./contractMixin";
  import {listLeaseRecord} from "@/api/lease/LeaseRecord.js"
  export default {
    name: "recordForm",
    dicts: ['business_status', 'brand_level ', ' lease_contract_status','custom_type',  'payment_rules',  'charge_generate_type',   ],
    components:{ Treeselect },
    mixins:[ contractMixin ],
    data() {
      return {
        listData:[],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //是否禁用
        recordData:[],
      };
    },
    created() {
    },
    methods: {
      show(option) {
        listLeaseRecord({'contractId':option.id}).then(res=>{
          for (let i = 0; i <res.rows.length ; i++) {
            res.rows[i]['newContent'] = JSON.parse(res.rows[i].content)
          }
          this.listData = res.rows;
        })
        this.open = true;
        this.title = "合同变更记录"
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
        this.$emit("cancel")
      },
    }
  };
</script>
